const cups = document.querySelectorAll('.cup-small')
const bigCup = document.getElementById('cup')
const remained = document.querySelector('.remained')
const percentage = document.querySelector('.percentage')
const liters = document.getElementById('liters')

cups.forEach((cup, idx) => {
    cup.addEventListener('click', () => {
        changeCupBgC(idx)
    })
})
var changeCupBgC = function(idx){
    if(idx === 7 && cups[idx].classList.value.search(/cup-small-active/) !== -1){
        idx--
    }else if(cups[idx].classList.value.search(/cup-small-active/) !== -1 && cups[idx].nextElementSibling.classList.value.search(/cup-small-active/) === -1){
        idx--
    }
    console.log(idx)

    cups.forEach((cup, idx2) => {
        if(idx2 <= idx){
            cup.classList.add('cup-small-active')
        }else{
            cup.classList.remove('cup-small-active')
        }
    })
    
    updateBigCup(idx)
}
var updateBigCup = function(idx){
    percentage.style.height = (idx + 1) * 12.5 + '%'
    remained.style.height = (100 - (idx + 1) * 12.5) + '%'
    percentage.innerHTML = `<div>${(idx + 1) * 12.5}%</div>`
    liters.innerText = 2 - (idx + 1) * 0.25 + 'L'
    if(idx === -1) percentage.innerHTML = ``
    
}